<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<!--
			
			假设现在从后台接受了一段关于访客的信息数据(添加新的访客信息从info里面按照顺序拿取),请实现问题一.gif的效果.
			
		-->
		<button class="add">添加一条新的访客信息</button>
		<button class="del">删除选中</button>
		<button class="sort">从小到大</button>
		<button class="allSelect">全选功能</button>
		<button class="reverse">反选</button>
		<table border="1" cellspacing="0" cellpadding="10">
			<tr>
				<th>序列号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>操作</th>
				<th>选择</th>
			</tr>
		</table>
		<script type="text/javascript">
			var info = [{
					name: "胡杭",
					age: 16
				},
				{
					name: "胜明",
					age: 22
				},
				{
					name: "军毅",
					age: 21
				},
				{
					name: "晓华",
					age: 13
				},
				{
					name: "盛聪",
					age: 23
				},
				{
					name: "侦剑",
					age: 32
				},
				{
					name: "红翔",
					age: 25
				},
				{
					name: "超维",
					age: 18
				},
				{
					name: "士琪",
					age: 22
				},
				{
					name: "艳华",
					age: 20
				}
				
			];

		let addBtn = document.querySelector(".add");
		let delBtn = document.querySelector(".del");
		let sortBtn = document.querySelector(".sort");
		let allSelectBtn = document.querySelector(".allSelect");
		let reverseBtn = document.querySelector(".reverse");
		let tbody = document.querySelector("tbody");
		let nowIndex = 0;
		//添加访客信息
		addBtn.addEventListener("click",function(){
			// innerHTML
			// appendChid

			let tr = document.createElement("tr");
			


			tr.innerHTML =
			 `
			 <td>${String(nowIndex+1).padStart(2,"0")}</td>
			 <td>${info[nowIndex%10]['name']}</td>
			 <td>${info[nowIndex%10]['age']}</td>
			 <td><button>删除</button></td>
			 <td><input type="checkbox" class="sel"></td>
			 `;

			// (++nowIndex == info.length) && (nowIndex == 0);
			nowIndex++;
			tbody.appendChild(tr);
			//appendCHild
			// let tdID = document.createElement("td");
			// tdID.innerText = "序列号";
			// td.appendChild(tdID)

			// let tdName = document.createElement("td");
			// tdName.innerText = "name"
			// tr.appendChild(tdName);

			
		})

		//删除信息
			tbody.addEventListener("click",function(e){
			if(event.target.nodeName == "BUTTON"){
				e.target.parentElement.parentElement.remove();
				// tbody.removeChild(event.target.parentElement.parentElement);
			}
			})
	
			//选中删除
			delBtn.addEventListener("click",function(){
				document.querySelectorAll("input:checked").forEach(function(item){
					item.parentElement.parentElement.remove();
				});
			})

			//排序功能
			sortBtn.addEventListener("click",function(){
				//将第一行排除在外的所有tr标签
				let trList = document.querySelectorAll("tr:not(:first-child)");

				let trArr = [];

				//将novelist转换成array
				trList.forEach(function(item){
					trArr.push(item)
				})

				//使用sort方法排序，根据年龄
				trArr.sort(function(a,b){
					// console.log(a.children[2]);
					return a.children[2].innerText - b.children[2].innerText;
				})
				trArr.forEach(function(item){
					tbody.appendChild(item);
				})
				console.log(trArr);
			})

			//全选功能
			let sel = document.querySelectorAll(".sel")
			allSelectBtn.addEventListener("click",function(){
				sel.forEach(function(item){
					
				})
			})
		</script>
	</body>

</html>